 <template>
  <div>
    <header>
      <div class="head">
        <img src="@/assets/right (1).png" alt="" @click="go()" />
        <span>账户信息</span>
      </div>
    </header>
    <main>
      <div class="main-top">
        <input type="file" placeholder="头像" @change="sendImg($event)" />
        <span class="h">头像</span>
        <img :src="fr($store.state.send)" alt="" class="port" />
        <p>
          <span>用户名</span
          ><span
            >{{ $store.state.log.username
            }}<img src="@/assets/右箭头6.png" alt=""
          /></span>
        </p>
        <p><span>收货地址</span><img src="@/assets/右箭头6.png" alt="" /></p>
      </div>
      <div class="main-bottom">
        <p>账号绑定</p>
        <p>
          <span
            ><img
              src=""
            />手机</span
          ><img src="@/assets/右箭头6.png" alt="" class="right" />
        </p>
        <p>安全设置</p>
        <p @click="changed">
          <span>登录密码</span
          ><span
            >修改<img src="@/assets/右箭头6.png" alt="" class="right"
          /></span>
        </p>
        <p>退出登录</p>
      </div>
    </main>
  </div>
</template>
 <script>
import { getaleat } from "@/api/index.js";
export default {
  data() {
    return {
      img: "17be34eebe899674.png",
    };
  },
  methods: {
    fr(str) {
      return "http://elm.cangdu.org/img/" + str.split("\\").join("/");
    },
    go() {
      this.$router.go(-1);
    },
    changed() {
      this.$router.push("/changge");
    },
    async sendImg(e) {
      var fd = new FormData();
      console.log(fd);
      var file = e.target.files[0];
      if (
        file.size < 1024 * 1000 &&
        (file.type == "image/jpeg" ||
          file.type == "image/jpg" ||
          file.type == "image/png")
      ) {
        fd.append("file", e.target.files[0]);
        var res = await getaleat(fd);
        this.img = res.data.image_path;
        this.$store.commit("sendImg", this.img);
      }
    },
  },

  computed: {},
};
</script>
 <style lang='css' scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-style: normal;
}
input {
  outline: none;
}
header {
  width: 100%;
  height: 3rem;
  background: #3190e8;
  padding-left: 10px;
}
.head {
  width: 14rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head img {
  width: 1.5rem;
  height: 1.5rem;
}
.head span {
  color: #fff;
  font-weight: 700;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f2f2f2;
  padding-top: 1rem;
}
.main-top {
  width: 100%;
  height: 10rem;
  background: #ffff;
  position: relative;
}
.port {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  right: 10px;
  top: 30px;
}
.h {
  /* width: 3rem; */
  white-space: nowrap;

  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  left: 10px;
  top: 30px;
}
.main-top input {
  width: 100%;
  height: 5rem;
  border: none;
  border-bottom: 1px solid #ccc;
  padding-left: 10px;
}
.main-top input:nth-child(1) {
  opacity: 0;
}
.main-top p {
  display: flex;
  width: 100%;
  height: 2.5rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
}
.main-top p:nth-of-type(1) {
  border-top: 1px solid #ccc;
}
.main-top p span {
  font-size: 14px;
}
.main-top p img {
  width: 1rem;
  height: 1rem;
}
.main-bottom {
  width: 100%;
  height: 12rem;
  display: flex;
  flex-direction: column;
  padding-top: 5px;
}
.main-bottom p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
}
.main-bottom p:nth-of-type(1) {
  width: 100%;
  height: 2rem;
  font-size: 14px;
  color: #666;
}
.main-bottom p:nth-of-type(1) span {
  font-size: 14px;
  color: #666;
}
.main-bottom p:nth-of-type(2) {
  width: 100%;
  height: 2rem;
  background: #fff;
  font-size: 14px;
  color: #666;
}
.main-bottom p:nth-of-type(2) span {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-bottom p:nth-of-type(3) {
  width: 100%;
  height: 2rem;
  font-size: 14px;
  color: #666;
}
.main-bottom p:nth-of-type(4) {
  width: 100%;
  height: 2rem;
  background: #fff;
  font-size: 14px;
  color: #666;
}
.main-bottom p:nth-of-type(5) {
  width: 100%;
  height: 2.5rem;
  background: #d8584a;
  border-radius: 10px;
  font-size: 14px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}
.main-bottom p:nth-last-of-type(2) span {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right {
  width: 1rem;
  height: 1rem;
}
</style>